{extends file="backend/index.tpl"} 

{block name="page-content"}
{literal}
<script type="text/javascript">
$(document).ready(function() {
	
	$('select[name="book_id"]').change(function () {
         var bookID = $('select[name="book_id"]').val();
         $("#volume_no > option").remove();
         console.log(bookID);
         $.ajax({   
        	 type: "POST", 
             url: "http://localhost/truyen/admin/ajax/getVolumeByBookID",
             cache: false, 
             data: { bookID: bookID},
             success: function(volumes) {
            	 console.log(volumes);
            	$.each(volumes,function(no,name){
            		var opt = $('<option />');
            		opt.val(no);
            		opt.text('Quyển '+no+' : '+name);
            		$('#volume_no').append(opt);
            	});
            }
         });
     });
});          
</script>
{/literal}
<form id="validate" class="addGame" method="POST" action="{$base_url}admin/chapter/updateChapter">
	<input type="hidden" class="validate[required]" name="id" value="{$chapter.id}" />
	<div class="row-fluid">
		<div class="span6">
			<div class="block">
				<div class="head">
					<h2>Update Chapter</h2>
					<ul class="buttons">
						<li><a href="#" onclick="source('form_default'); return false;">
								<div class="icon">
									<span class="ico-info"></span>
								</div> </a>
						</li>
					</ul>
				</div>
				<div class="data-fluid">
					<div class="row-form">
						<div class="span3">Name</div>
						<div class="span9">
							<input type="text" class="validate[required]" name="name" value="{$chapter.name}" /> 
							<span class="bottom">Required</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Book Name</div>
						<div class="span9">
							<select name="book_id" class="select" style="width: 100%;">
								<option value="0">Nhớ Chọn Nha !!!</option>
								{foreach from=$listBook item=book}
								<option value="{$book.book_id}" {if $chapter.book_id eq $book.book_id}Selected{/if}>{$book.book_name}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">No(Chương)</div>
						<div class="span9">
							<input type="text" class="validate[required]" id="uniqueNo" name="no" value="{$chapter.no}"/> 
							<span class="bottom">Required</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Description</div>
						<div class="span9">
							<textarea name="page_description"
								placeholder="Placeholder example" class="validate[required]">{$chapter.page_description}</textarea>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Description</div>
						<div class="span9">
							<textarea name="description" placeholder="Placeholder example"
								class="validate[required]" style="height: 300px !important">{$chapter.description}</textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="span6">
			<div class="block">
				<div class="head">
					<h2></h2>
					<ul class="buttons">
						<li><a href="#" onclick="source('form_pa'); return false;">
								<div class="icon">
									<span class="ico-info"></span>
								</div> </a>
						</li>
					</ul>
				</div>
				
				<div class="data-fluid">
					<div class="row-form">
						<div class="span3">Unique Name</div>
						<div class="span9">
							<input type="text" class="validate[required]" id="uName" name="uname" value="{$chapter.uname}" /> <span
								class="bottom">Required</span>
						</div>
					</div>
					
					<div class="row-form">
						<div class="span3">Volume</div>
						<div class="span9">
							<select id="volume_no" name="volume_no" class="select" style="width: 100%;">
								<option value="0">Nếu Có. Nhớ Chọn Nha !!!</option>
								{foreach from=$listVolume item=volume}
								<option value="{$volume.volume_no}" {if $chapter.volume_no eq $volume.volume_no}Selected{/if}>Quyển {$volume.volume_no} : {$volume.volume_name}</option> 
								{/foreach} 
							</select>
							<span class="bottom" style='color:red'>Nhớ Chọn Book Name (Nếu Có) Trước Nha!</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Status</div>
						<div class="span9">
							<input type="radio" class="validate[required]" name="status" value="1" {if $chapter.status eq '1'}checked="checked"{/if}/> Hiện 
							<input type="radio" class="validate[required]" name="status" value="0" {if $chapter.status eq '0'}checked="checked"{/if}/> Ẩn
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Open</div>
						<div class="span9">
							<select name="open" class="select" style="width: 100%;">
								<option value="Y" {if $chapter.open eq 'Y'}Selected{/if}>Yes</option>
								<option value="N" {if $chapter.open eq 'N'}Selected{/if}>No</option>
								<option value="P" {if $chapter.open eq 'P'}Selected{/if}>PC</option>
								<option value="M" {if $chapter.open eq 'M'}Selected{/if}>Mobile</option>
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Title</div>
						<div class="span9">
							<input type="text" id="pageTitle" name="page_title" value="{$chapter.page_title}" />
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Keyword</div>
						<div class="span9">
							<input name="page_keyword" type="text" class="tags" value="{$chapter.page_keyword}" />
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Mobile Description</div>
						<div class="span9">
							<textarea name="mob_description"
								placeholder="Có Thể để rỗng nha!!!"
								style="height: 300px !important">{$chapter.mob_description}</textarea>
						</div>
					</div>
					<div class="toolbar bottom tar">
						<div class="btn-group">
							<button class="btn btn-info" type="button"
								onClick="$('#validate').validationEngine('hide');">Hide prompts</button>
							<button class="btn" type="submit" name="submit" id="addBook">Update
								Chapter</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
{/block}

